基础学习
-
-
vue写法与原生JS的编程范式区别
-
vue做法：声明式编程，声明vue对象，模板语法直接绑定
-
定义一个vue对象，将div挂载在vue对象上
-
在vue对象内定义变量message，并绑定数据
-
将message变量用模板语法放在div元素上显示
-
修改vue对象中的变量message，div元素数据自动改变
-
-
原生js做法：命令式编程，需要一步一步执行
-
定义一个变量，通过名字找到该标签，将其dom对象传给变量
-
通过dom对象找到需要的message属性
-
修改message数据
-
将修改的元素替换到div
-
-
-
Mustache语法-大括号语法
-
在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式：
-
注意：括号里面的必须是变量、可执行命令、函数等，字符串啥的请在括号外面。
-
-
-
-
浅析Vue对象：el和data
-
Vue对象是创建的虚拟DOM对象，传递一个对象，里面可以有多个属性，属性之间用,分隔开。
-
el是标识将app与DIV挂载，从此app管理了DIV的一切内容
-
手动执行vm.$mount(el)方法的话，也是可以挂载的
-
-
-
data是数据属性，有多种写法：以下示例可通过app.name修改
-
对象写法，对象属性name，值为smyhvae（注意：因为对象是引用地址，所以如果在组件内使用该做法，那么多个组件将共享一块数据）
-
-
函数写法，返回一个对象（在简单的Vue实例中，没什么区别，因为你app对象不会被复用。但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。）
-
-
ES6函数写法，（和上面没啥区别）
-
-
-
-
扩展vue对象参数：methods-定义方法
-
监听事件，定义函数需要引入methods的属性，同样值为对象，对象里可定义需要使用的多个方法，方法之间用,隔开----
-
-
-
vue的内部指令v-
-
v-for：循环列表的展示
-
常用的数组有许多数据，需要全部展示或者部分展示，在原生JS中需要使用for循环遍历依次替换div元素，在vue中，使用v-for可以简单遍历生成元素节点。
-
-
语法：v-for="item in items"
-
item存放的循环得到的属性对应的值，index是数组索引，:key是为了方便修改数据，只需要知道修改插入会更高效就行，推荐获取Index的时候就加上这个
-
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
-
-
v-for中key的使用注意事项
-
注意：在 Vue 2.2.0+ 版本里，当在组件中使用 v-for 时，key 属性是必须要加上的。
-
这样做是因为：每次 for 循环的时候，通过指定 key 来标示当前循环这一项的唯一身份。
-
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
-
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
-
key的类型只能是：string/number，而且要通过 v-bind 来指定。
-
-
-
v-on：监听事件
-
使用v-on:click的关键字给元素绑定监听点击事件，给按钮分别绑定上点击事件，并绑定触发事件后回调函数add和sub。也可以在回调方法中直接使用表达式。例如：count++和count--。（复杂的请不用使用表达式）
-
-
注意：函数不包含参数时可忽略括号！
-
方法本身需要一个参数，如果不传入参数，将输出undefined
-
如果不传入参数的同时并且简写省略()，那么默认会将event事件传入作为该参数，而不是undefined
-
当参数需要event并且想手动传入时需要注意：event前面需要$符号，可以识别为vue对象的event属性，否则会判定为变量去data里面寻找。
-
-
同样支持ES6简写：
-
-
v-on的常用事件
-
v-on 提供了click 事件，也提供了一些其他的事件。
-
v-on:click----点击
-
v-on:keydown----按键按下
-
v-on:keyup----按键松开
-
v-on:mousedown
-
v-on:mouseover
-
v-on:submit
-
v-on:input----键盘输入
-
....
-
-
v-on的修饰词
-
.stop的使用，btn的click事件不会传播，不会冒泡到上层元素触发事件，调用event.stopPropagation()。
-
.prevent 调用event.preeventDefault阻止元素默认行为，比如form表单中的submit点击后自动跳转事件被阻止。
-
-
.enter监听键盘事件：回车键
-
-
.keyup.按键编号 ---> 编号查询：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
-
.native给组件绑定构造器里的原生事件
-
在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。
-
就需要用到我们的.native修饰器了。
-
-
-
-
-
-
-
-
v-once：单次渲染
-
v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。
-
-
-
v-html：html内容替换
-
类似于css里面的inHtml
-
-
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
-
-
v-text：相当于js的innerHTML方法
-
v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。
-
-
差值表达式和 v-text 的区别：
-
区别1： v-text 没有闪烁的问题，因为它是放在属性里的。
-
区别2 :插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会覆盖元素中原本的内容。
-
-
-
v-pre：原始字符，类似pre标签
-
我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转化的message的变量值，此时我们可以使用v-pre标签。
-
-
-
v-cloak：解析后显示，用于网络不佳时
-
v-cloak：保持和元素实例的关联，直到结束编译后自动消失。
-
v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。
-
有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。
-
-
通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。
-
-
v-show：设置元素的显示和隐藏（在元素上添加/移除style="display:none"属性）
-
作用：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 display:none属性；否则移除display:none属性。
-
每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除style="display:none"属性，表示节点的显示和隐藏。
-
-
-
v-if：设置元素的显示和隐藏（添加/删除DOM元素）
-
作用：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
-
在切换时，元素和它的数据绑定会被销毁并重建。
-
单独使用v-if，变量为布尔值，为true才渲染Dom
-
-
v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。
-
v-if和v-else用法
-
使用v-if和v-else选择渲染指定的Dom，点击按钮对isUser变量取反。
-
-
-
vue底层复用操作：
-
vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。
-
在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。
-
如果不希望出现类似复用问题，可以给对应的dom元素加上key值，并保证key不同。
-
-
-
v-if和v-show的区别
-
v-if和v-show都能够实现对一个元素的隐藏和显示操作。
-
区别：
-
v-if：每次都会重新添加/删除DOM元素
-
v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除style="display:none"属性，表示节点的显示和隐藏。
-
-
优缺点：
-
v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作。
-
v-show：有较高的初始渲染消耗。也就是说，即使一开始v-show="false"，该节点也会被创建，只是隐藏起来了。而v-if="false"的节点，根本就不会被创建。
-
-
总结：
-
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
-
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
-
-
-
-
v-bind：动态绑定属性->修改样式、类名、属性值等
-
为什么需要使用：<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{{imgURL}}" alt="">，这也是错误的。
-
-
动态绑定class(对象语法)
-
对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。
-
给h2标签加上class="active"，当Dom元素有次class时候，变红<style>.active{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。
-
-
注意：对象格式，不同属性依旧是,分割开，属性名：true/false，属性名必须是单引号包裹的或者用变量名----因为最外面已经是"了
-
-
-
-
动态绑定class(数组用法)
-
class属性中可以放数组，会依次解析成对应的class。
-
-
加上单引号的表示字符串，不加的会当成变量，也可以直接使用方法返回数组对象：
-
-
-
动态绑定style(对象语法)
-
注意单引号
-
-
-
动态绑定style(数组语法)
-
类似绑定class
-
-
-
三元表达式动态绑定
-
通过data中布尔值 flag 来判断：如果 flag 为 true，就给 h1 标签添加my-active样式；否则，就不设置样式。----> 可读性很差
-
-
-
-
v-model：双向数据绑定，只能用于表单元素，或者用于自定义组件。
-
改变两者其中的一个，另一个就同步变化
-
-
v-model与v-bind的区别
-
v-bind：只能实现数据的单向绑定，从 M 自动绑定到 V。
-
v-model：只有v-model才能实现双向数据绑定。注意，v-model 后面不需要跟冒号
-
-
注意：v-model 只能运用在表单元素中，或者用于自定义组件。常见的表单元素包括：input(radio, text, address, email....) 、select、checkbox 、textarea。
-
v-model的原理
-
v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。
-
-
-
v-model的修饰符
-
lazy：默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据
-
-
-
-
-
Vue 实例的实例属性与方法：前缀 $
-
除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
-
如图所示：
-
-
vm.$data ----> 表示Vue实例的data属性
-
-
vm.$el -----> 表示Vue挂载的DOM对象
-
-
vm.$mount -----> 挂载方法
-
-
vm.$destroy -----> 卸载方法
-
-
vm.$forceUpdate-----> 强制更新方法
-
-
vm.$watch ----> 一个实例方法
-
-
-
-
-
-
Vue-全局API
-
全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。
-
说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。
-
Vue官网-全局API：https://cn.vuejs.org/v2/api/#Vue-directive
-
-
Vue.directive自定义指令
-
我们之前学习过内部指令v-，从现在开始我们可以自定义属于自己的指令
-
比如我们自定义一个改变颜色的指令：v-colorchange（注意，指令名不可用驼峰表示法，不然无法生效）
-
-
自定义指令传递的三个参数：el、binding、vnode、oldVnode
-
el: 指令所绑定的元素，可以用来直接操作DOM。
-
binding: 一个对象，包含指令的很多信息。
-
vnode: Vue编译生成的虚拟节点。
-
官网：
-
除了 el 之外，其它参数都应该是只读的，切勿进行修改。
-
如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
-
一个使用了这些属性的自定义钩子样例：
-
-
-
-
自定义指令生命周期、钩子函数
-
自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
-
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
-
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
-
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
-
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
-
unbind:只调用一次，指令与元素解绑时调用。
-
-
-
动态指令参数
-
v-mydirective:[argument]="value" ：argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
-
例如：
-
你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。
-
我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：
-
-
这会把该元素固定在距离页面顶部 200 像素的位置。
-
但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？
-
这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。
-
-
-
-
函数简写
-
在 bind 和 update 时触发相同行为，而不关心其它的钩子。
-
比如这样写：
-
-
-
对象字面量
-
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。
-
记住，指令函数能够接受所有合法的 JavaScript 表达式。
-
-
-
-
-
-
Vue.extend扩展实例构造器
-
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。
-
经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
-
由于我们还没有学习Vue的自定义组件，所以我们先看跟组件无关的用途。
-
-
自定义无参数标签
-
需求：
-
要在博客页面多处显示作者的网名，并在网名上直接有链接地址。
-
我们希望在html中只需要写<author></author>，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。
-
-
代码：
-
-
-
-
Vue.set全局操作
-
Vue.set 作用：在构造器外部操作构造器内部的数据、属性或者方法。
-
比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。
-
引用构造器外部数据：
-
外部数据：不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用。
-
外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
-
示例：
-
-
-
改变外部数据的三种方法：
-
1、用Vue.set改变
-
-
2、用Vue对象的方法添加
-
-
3、直接操作外部数据
-
-
-
为什么要有Vue.set的存在?
-
由于Javascript的限制，Vue不能自动检测以下变动的数组。
-
当你利用索引直接设置一个项时，vue不会为我们自动更新。
-
当你修改数组的长度时，vue不会为我们自动更新。
-
-
我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。
-
-
-
-
-
扩展vue对象参数：computed-对内容进行简单的转换与使用
-
为什么需要它？
-
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
-
-
对于需要复用的命令或者对于任何复杂逻辑，都应当使用计算属性。
-
-
-
优点
-
可复用
-
与视图分离
-
具有缓存机制
-
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 所使用数据还没有发生改变，多次访问同一计算属性会立即返回之前的计算结果，而不必再次执行函数。
-
在计算结果不发生改变的情况下，computed 的方法只被调用一次，即便是多处多次调用，computed 也只被调用一次，这就是 computed 缓存的优势。
-
-
-
用法：
-
获取每一个book对象的price累加，当其中一个book的价格发生改变时候，总价会随之变化。
-
-
-
计算属性的setter和getter
-
计算属性一般没有set方法（使用set方法设置newValue值），只读属性，只有get方法
-
-
举例：setter方法
-
通过setter这种方式，我们可以在改变计算属性值的同时也改变和计算属性相关联的属性值。
-
-
-
-
计算属性和methods的对比
-
在this.firstName + " " + this.lastName的属性不变的情况下，methods调用了四次，而计算属性才调用了一次，性能上计算属性明显比methods好。而且在改动firstName的情况下，计算属性只调用一次，methods依然要调用4次。
-
-
-
计算属性 vs 侦听属性
-
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。
-
然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
-
-
watch监听：
-
-
计算属性：
-
-
计算属性明显更美观好看
-
-
注意：计算属性范围在vue实例内，修改vue实例外部对象，不会重新计算渲染，但是如果先修改了vue实例外对象，在修改vue计算属性的对象，那么外部对象的值也会重新渲染。
-
如图
-
-
修改外部的全局变量：other
-
-
修改自身的相关属性
-
-
-
-
扩展vue对象参数：watch-监听数据变化，一般只监听一个变量或数组
-
使用场景：watch(异步场景)，computed(数据联动)
-
侦听属性：一种更通用的方式来观察和响应 Vue 实例上的数据变动
-
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
-
语法：
-
-
-
动态绑定数据：数组的响应方式
-
我们改变DOM绑定的数据时，DOM会动态的改变值。数组也是一样的。但是对于动态变化数据，有要求，不是任何情况改变数据都会变化。
-
-
解析：
-
btn2按钮是通过索引值修改数组的值，这种情况，数组letters变化，DOM不会变化。
-
而数组的方法，例如push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法修改数组的数据，DOM元素会随之修改。
-
splic()：删除元素、插入元素、替换元素
-
splice(1,1)再索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素
-
splice(index,0,'aaa')再索引index后面删除0个元素，加上'aaa'
-
splice(1,1,'aaa')替换索引为1的后一个元素为'aaa'
-
-
-
Vue的生命周期及钩子函数
-
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
-
在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
-
生命周期图示：
-
-
beforeCreate方法：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
-
created方法：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。
-
类型：Function
-
详细：
-
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。
-
-
用法：
-
-
-
beforeMount方法：此时已经完成了模板的编译，但是还没有挂载到页面中
-
mounted方法：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示真实DOM渲染完了，可以操作DOM了）
-
beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
-
updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。----> PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。
-
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
-
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。----> PS：可以在beforeDestory里清除定时器、或清除事件绑定。
-
-
注释版图：
-
-
-
扩展vue对象参数：Mixins-混入-分发 Vue 组件中的可复用功能
-
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
-
一个混入对象可以包含任意组件选项。
-
当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
-
-
-
两种用途：
-
在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
-
很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
-
-
用法：
-
基本用法
-
我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.
-
-
-
-
mixins的调用顺序、选项数据合并：组件和混入对象含有同名选项
-
从执行的先后顺序来说，混入的先执行，然后构造器里的再执行
-
-
选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
-
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
-
-
方法名相同时：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，组件对象的键值对优先！
-
-
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
-
-
-
-
全局API：mixin混入方式【不建议使用】
-
项目里不要用：一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
-
-
-
-
自定义选项合并策略
-
自定义选项将使用默认策略，即简单地覆盖已有值。
-
如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：
-
-
-
-
扩展vue对象参数：template-字符串模板
-
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
-
示例：
-
-
将html结构写在一对script标签中，设置type="X-template"
-
-
-
扩展vue对象参数：render-渲染函数
-
概念：
-
-
-
代码示例：
-
-
-
扩展vue对象参数：component-组件化开发
-
扩展vue对象参数：component-组件化开发
-
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>
-
-
组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是不需要像 el 这样根实例特有的选项。
-
这就是为什么data有函数写法的原因：一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
-
步骤：
-
创建组件构造器对象：template中是组件的DOM元素内容
-
注册组件
-
使用组件：
-
-
-
注册类型：全局注册和局部注册
-
全局注册：Vue.component
-
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
-
-
-
局部注册：通过 components:{cpnc:cpnc}
-
-
-
写法
-
基本使用：my-cpn是全局组件的名字（标签名），cpnc是定义的组件对象（创建出来的组件模板对象）。使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。
-
-
基础升级版：创建并注册-注册组件的语法糖
-
-
组件模板的分离写法
-
script标签：script标签注意类型是text/x-template。
-
-
template标签：将内容写在标签内---上面的写法一、写法二并不是很智能，因为在定义模板的时候，没有智能提示和高亮，容易出错。
-
使用template标签：
-
-
-
-
-
注意
-
名字问题：
-
红框部分，要保证二者的名字是一致的。如果在注册时，组件的名称是驼峰命名
-
-
那么，在标签中使用组件时，需要把大写的驼峰改为小写的字母，同时两个单词之间使用-进行连接：
-
-
所以，为了避免名字不一致的问题，我们注册组件时，组件的名称可以直接写成my-component。比如：（避免驼峰不一致的建议写法）
-
-
-
每个组件必须只有一个根元素
-
示例：
-
-
-
-
父组件与子组件的区别
-
定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。
-
-
注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。
-
-
组件的数据data
-
必须使用函数，对象无法获取
-
-
-
-
propsData 全局扩展的数据传递
-
propsData 不是和属性有关，他用在全局扩展时进行传递数据。
-
代码如下：
-
-
扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。
-
我们用propsData三步解决传值：
-
1.在全局扩展里加入props进行接收：propsData:{a:1}
-
2.传递时用propsData进行传递：props:[‘a’]
-
3.用插值的形式写入模板：{{ a }}
-
-
完整代码：
-
-
总结：propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。
-
-
父组件向子组件传递数据/从父级接收数据：props属性--比如子组件获取vue对象的data数据
-
通过 Prop 向子组件传递数据-数组写法（字符串数组，数组中的字符串就是传递时的名称）：
-
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。
-
-
加上v-bind-基础升级版：
-
-
当组件变得越来越复杂的时候，为每个相关的信息定义一个 prop 会变得很麻烦-基础重构版：
-
-
-
通过 Prop 向子组件传递数据-对象写法（设置传递时的类型，也可以设置默认值等）：
-
通常你希望每个 prop 都有指定的值类型。
-
这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：
-
定义了多个参数，我们上面定义了几乎绝大部分类型的参数
-
比如我们给title传递了一个字符串数据
-
-
其他类型的参数：
-
-
type 也可以是一个自定义构造器函数，使用 instanceof 检测。
-
-
-
我们同样可以传递类的数据进行详细限定：
-
我们这里类里面的cmessage参数进行了多个限定条件：
-
限定类型为字符串
-
设定默认值为zzzzz
-
required: true表示必须传递该数据
-
-
-
单向数据流
-
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：
-
父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
-
这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
-
-
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
-
如果你这样做了，Vue 会在浏览器的控制台中发出警告。
-
这里有两种常见的试图变更一个 prop 的情形：
-
这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。
-
在实际的业务中我们经常会碰到下面的情况：
-
-
-
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
-
我们传入message信息，通过computed计算处理，将其格式化为sub-message再引用格式化后的数据
-
-
-
-
在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。----> 这就是为什么我们子组件需要自己在data里return一个自己的单独数据的原因！
-
-
更多：
-
-
Vue 组件之使用props传递数据_https://blog.csdn.net/qingyulove/article/details/81613319
-
-
替换/合并已有的 Attribute
-
对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。
-
所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！
-
庆幸的是，class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。
-
禁用 Attribute 继承-inheritAttrs
-
如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。
-
例如：
-
-
inheritAttrs: false 选项不会影响 style 和 class 的绑定。
-
-
-
-
父组件监听子组件事件：$emit 方法
-
$emit 方法详解
-
$emit 方法：子组件向父组件$emit （发射传递）出去两个参数：自定义事件名（必须），传递过去的数据
-
父组件可接收到子组件传过来的自定义事件名，通过v-on监听捕获触发，调用自身的methods方法执行操作
-
假如父组件v-on省略参数调用，但子组件传递过来了一个参数，那么：父组件调用的方法依旧能接收到那个参数，因为以前系统默认传递的是event对象，但由于该事件是我们自定义的，所以系统就不会传递event，而是默认传递我们$emit 传递的参数。
-
注意：
-
由于HTML的标签和属性名不区分大小写，所以emit在HTML里无法使用驼峰法命令，因为即使属性采用中划线分隔开，也会判断和自定义的驼峰法时间名不同，非要驼峰法，需要将每个单词的首字母大写，包括第一个！
-
脚手架可使用驼峰法
-
-
-
自定义事件的流程：
-
在子组件中，通过$emit()来触发事件。
-
在父组件中，通过v-on来监听子组件事件。
-
-
参数：
-
-
图解：
-
-
引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。
-
-
-
父子组件相互访问：$children，$refs，$parent，$root
-
父组件获取子组件对象：
-
$children：类似于Dom对象里的getElementsByClass()，返回的是一个对象数组，每一个数组对应的是一个子组件，如果需要调用里面的方法，我们可以使用 . 来解决：
-
-
【常用】$refs：获取引用，返回的是一个对象。与children的区别在于：它返回的子组件必须是使用ref标记了的，类似于ID，获取指定的子组件，需要使用对象的key值获得：
-
-
-
子组件访问父组件对象：
-
$parent只有一个，因此不用加下标
-
-
$root访问根组件，也就是我们的vue实例
-
-
-
-
模板占位符： <template> 、component
-
<template> --> 一个状态可切换多个标签、列表循环影响多个标签
-
使用 v-if 条件渲染分组
-
因为 v-if 是一个指令，所以必须将它添加到一个元素上。
-
但是如果想切换多个元素呢？
-
此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。
-
最终的渲染结果将不包含 <template> 元素。
-
-
-
在 <template> 上使用 v-for
-
先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？
-
-
有3种方法可以实现
-
①：直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭）
-
-
②：在div和span外面包裹一个div，给这个div加循环（该方法会额外增加一个多余的div标签）
-
-
③：若你不想额外增加一个div，此时应该使用template来实现（推荐）
-
-
template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上
-
-
-
-
-
<component> --> 一个变量影响三个甚至三个以上的组件切换、动态组件
-
我们可以通过flag的值来进行组件的切换。但是，flag的值只可能有两种情况，也就是说，v-if和v-else只能进行两个组件之间的切换。
-
-
<component>属于Vue的内置组件
-
-
我们可以用到Vue提供的<component>标签来实现组件切换
-
-
在动态组件上使用 keep-alive 缓存
-
在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
-
-
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。
-
为了解决这个问题，我们可以用一个 <keep-alive>元素将其动态组件包裹起来。
-
-
注意：这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name选项还是局部/全局注册。
-
-
-
-
插槽分发内容：<slot>、v-shot指令（slot-scope已过时）
-
内容插槽：<slot>
-
基础用法：没有包含一个 <slot> 元素时该组件起始标签和结束标签之间的任何内容都会被抛弃。但有了slot插槽，我们的内容将会显示到原来slot的地方！
-
-
基础进阶：默认渲染内容，如果插槽有其他内容则不显示默认内容
-
默认submit示例：
-
-
-
-
具名插槽：<slot> 元素有一个特殊的 attribute：name
-
注意 v-slot 只能添加在 <template> 上 (只有一种例外情况：https://cn.vuejs.org/v2/guide/components-slots.html#独占默认插槽的缩写语法)
-
-
具名插槽的缩写：
-
-
-
-
父组件替换插槽标签，但是内容由子组件来提供
-
和其他插槽刚好相反
-
示例：父组件对子组件默认样式不满意的场景
-
-
-
-
-
编译作用域：和其他属性相同，能访问Vue对象作用域，无法访问组件/模板内的数据
-
过渡动画-transition
-
单元素/组件的过渡、过渡概念
-
transition概念：
-
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
-
条件渲染 (使用 v-if)
-
条件展示 (使用 v-show)
-
动态组件
-
组件根节点
-
-
过渡类名
-
在进入/离开的过渡中，会有 6 个 class 切换。
-
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。--- > 元素开始插入动画前的状态，动画开始即移除
-
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。--- > 元素插入动画的过程
-
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。--- > 动画插入结束状态，动画完成即移除
-
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。--- > 元素正式被删除动画开始状态，动画开始即移除
-
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。--- > 元素被删除动画的过程
-
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。--- > 元素被删除动画结束状态，动画完成即移除
-
-
没有名字的 <transition>：v- 是过渡类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
-
-
-
-
示例：
-
CSS 过渡：向右淡入淡出
-
-
CSS 动画：先放大再缩小
-
-
-
-
自定义过渡的类名
-
通过以下 attribute 来自定义过渡类名：
-
enter-class
-
enter-active-class
-
enter-to-class (2.1.8+)
-
leave-class
-
leave-active-class
-
leave-to-class (2.1.8+)
-
-
示例：
-
-
-
同时使用过渡和动画
-
Vue 为了知道过渡的完成，必须设置相应的事件监听器。
-
它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。
-
如果你使用其中任何一种，Vue 能自动识别类型并设置监听。
-
但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。
-
在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
-
-
显性的过渡持续时间：duration
-
在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
-
在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
-
-
也可以定制进入和移出的持续时间：
-
-
-
JavaScript 钩子：实现半场动画
-
半场动画：只有出场动画、没有离场动画
-
在属性中声明 JavaScript 钩子
-
-
钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
-
-
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
-
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
-
举例：使用钩子函数模拟小球半场动画
-
点击按钮后，让小球进行移动。---> 模拟加入购物车动画
-
-
注意：
-
-
-
-
初始渲染的过渡：appear
-
在第一次渲染的时候才会起作用
-
可以通过 appear attribute 设置节点在初始渲染的过渡
-
-
这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。
-
-
自定义 JavaScript 钩子：
-
-
扩展：
-
-
多个元素的过渡
-
v-bind写法：
-
-
switch写法：
-
-
-
-
过渡模式：mode
-
在“on”按钮和“off”按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。
-
-
分类：
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
-
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
-
-
-
-
多个组件的过渡
-
多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反，我们只需要使用动态组件components：
-
-
-
列表过渡：<transition-group>
-
列表过渡:
-
不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
-
过渡模式不可用，因为我们不再相互切换特有的元素。
-
内部元素总是需要提供唯一的 key 属性值。
-
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
-
-
列表的进入/离开过渡
-
简单示例：
-
-
-
列表的排序过渡：v-move
-
<transition-group> 组件还有一个特殊之处。
-
不仅可以进入和离开动画，还可以改变定位。
-
要使用这个新功能只需了解新增的 v-move attribute，它会在元素的改变定位的过程中应用。
-
像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
-
v-move 对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：
-
Vue 使用了一个叫 FLIP 简单的动画队列
-
使用 transforms 将元素从之前的位置平滑过渡新的位置。
-
我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡。
-
-
使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中
-
FLIP 动画不仅可以实现单列过渡，多维网格也同样可以过渡
-
-
-
列表的交错过渡
-
data 属性与 JavaScript 通信，就可以实现列表的交错过渡：输入自动匹配列表里选型，不匹配的消失。
-
-
-
-
过渡复用：transition+component
-
创建一个可复用过渡组件，你需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。
-
简单例子：
-
-
-
-
-
动态过渡【未完】
-
【扩展】状态过渡
-
Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。
-
那么对于数据元素本身的动效呢，比如：
-
数字和运算
-
颜色的显示
-
SVG 节点的位置
-
元素的大小和其他的属性
-
-
这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。
-
-
-
-
渲染函数（render） & JSX
-
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。
-
然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。
-
这时你可以用渲染函数，它比模板更接近编译器。
-
让我们深入一个简单的例子，这个例子里 render 函数很实用。
-
当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时：
-
-
这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 <slot></slot>，在要插入锚点元素时还要再次重复。
-
虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：
-
-
向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。
-
createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription。
-
因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。
-
我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。
-
“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
-
-
-
-
VNode 必须唯一
-
组件树中的所有 VNode 必须是唯一的。这意味着，下面的渲染函数是不合法的：
-
-
如果你真的需要重复很多次的元素/组件，你可以使用工厂函数来实现。例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落：
-
-
-
createElement 参数：
-
-
使用 JavaScript 代替模板功能
-
实现 ---> v-if 和 v-for 的功能
-
只要在原生的 JavaScript 中可以轻松完成的操作，Vue 的渲染函数就不会提供专有的替代方法。
-
-
-
实现 ---> v-model 的功能
-
渲染函数中没有与 v-model 的直接对应——你必须自己实现相应的逻辑：
-
-
-
实现 ---> 事件 & 按键修饰符 的功能
-
对于 .passive、.capture 和 .once 这些事件修饰符，Vue 提供了相应的前缀可以用于 on：
-
-
对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：
-
-
实现 ---> 插槽 的功能
-
你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：
-
-
也可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数：
-
-
如果要用渲染函数向子组件中传递作用域插槽，可以利用 VNode 数据对象中的 scopedSlots 字段：
-
-
-
-
-
JSX:Babel 插件
-
-
-
扩展vue对象参数：filters-过滤器
-
自定义过滤器，可被用于一些常见的文本格式化。
-
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
-
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
-
-
局部过滤器：
-
-
全局定义过滤器：
-
-
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
-
过滤器可以串联：
-
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA的结果传递到 filterB 中。
-
-
过滤器是 JavaScript 函数，因此可以接收参数：
-
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
-
-
-
扩展vue对象参数：delimiters-改变我们插值的符号
-
Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。
-
-
-
extends：允许声明扩展另一个组件
-
和 mixins 类似：
-
-
-
vue.nextTick()方法的使用详解（简单明了）-> https://blog.csdn.net/zhouzuoluo/article/details/84752280
进阶学习
-
单文件组件：文件扩展名为 .vue
-
相关：
-
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
-
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
-
全局定义(Global definitions) 强制要求每个 component 中的命名不得重复
-
字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
-
不支持 CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
-
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
-
-
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
-
-
-
模块化开发
-
为什么要有模块化开发？
-
随着前端JavaScript越来越复杂，假如我们在一个html文件里引入了多个js,如果不同js使用了一个同名的变量，那么，我们的部分js将因为变量同名而产生不可预知的后果。
-
因此，我们使用匿名函数执行，利用作用域来解决变量冲突问题，这时，我们又产生了一个新的问题：js代码无法复用了！
-
-
为了解决代码复用又不想产生变量冲突问题，出现了原始的模块化概念：这里我们定义了一个moduleA变量，这就是表示我们是一个A模块，将匿名执行函数赋值给A，通过函数内部定义的一个对象，return传递了出来,其他JS代码就可以通过我们的模块调用可复用代码
-
-
后来产生了模块化规范：CommonJS，AMD，CMD，Modules(ES6)
-
-
-
CommonJS（了解）
-
模块化核心：导出和导入
-
通过CommonJS我们不再需要自己定义模块和匿名函数执行来导出，通过module.exports导出包含我们需要数据的对象，在webpack中可以给我们解析出来（nodeJS是遵循CommonJS规范的）
-
-
CommonJS导入：解构赋值
-
-
-
Modules(ES6/重点)
-
流程：
-
-
export导出：export default导出的是值，export导出的是变量名
-
一个js里面只能导出一个default，我们可以自定义名字接收它
-
-
-
作为模块化引入，不存在命名冲突了，因为每个JS都是自己独有的空间，注意：使用module的script标签会默认发起cors跨域请求，因此本地跨域问题->VScode用live-server插件，或者放在服务器上
-
-
import导入：
-
-
全部导入：import * as aaa from '../aaa.js' ----> （from）从 aaa.js 里 （import)导入 全部并 （aaa) 命名为 aaa
-
python是from xxx import xxx
-
-
-
-
webpack：JavaScript静态模块打包工具
-
前端模块化：
-
如果工程模块依赖非常简单，甚至是没有模块化概念，只需要简单合并，压缩，则可以使用grunt/gulp，反之，推荐使用webpack
-
-
-
安装webpack
-
安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
-
查看自己的node版本：
-
-
全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)
-
-
在开发软件终端：局部安装webpack（后续才需要）
-
--save-dev`是开发时依赖，项目打包后不需要继续使用的。
-
-
-
为什么全局安装后，还需要局部安装呢？
-
在终端直接执行webpack命令，使用的全局安装的webpack
-
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack
-
-
-
准备工作：创建文件夹和npm初始化
-
我们创建如下文件和文件夹：
-
-
文件和文件夹解析：
-
dist文件夹：用于存放之后打包的文件 ---> 打包后代码文件夹
-
src文件夹：用于存放我们写的源文件 ---> 源代码文件夹
-
main.js：项目的入口文件。
-
-
mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。
-
-
-
index.html：浏览器打开展示的首页html
-
package.json：通过npm init生成的，npm包管理的文件（建议新建完文件夹和相关文件就进行这一步操作）
-
-
-
JS文件打包
-
该行代码表示:将main.js源文件打包为dist文件夹下的bundle.js文件
-
-
打包后会在dist文件下，生成一个bundle.js文件
-
bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可
-
-
-
-
配置打包文件：入口和出口（文件路径）
-
我们在项目目录下创建一个webpack.config.js文件：
-
-
-
局部安装webpack
-
目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？
-
因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。
-
所以通常一个项目，都有自己局部的webpack。
-
-
第一步，项目中需要安装自己局部的webpack
-
这里我们让局部安装webpack3.6.0
-
Vue CLI3中已经升级到webpack4，但是它将配置文件隐藏了起来，所以查看起来不是很方便。
-
-
--save-dev：表示本项目局部安装webpack，将会在该项目文件夹创建一个局部的webpack文件夹
-
-dev：表示开发时依赖，只在开发时使用，真正发布时不会使用，从而避免打包将自己的文件夹也打包编译出去。
-
-
第二步，通过node_modules/.bin/webpack启动webpack打包
-
-
-
package.json自定义局部webpack
-
我们可以在package.json的scripts中定义自己的执行脚本。
-
-
package.json中的scripts在执行时，会按照一定的顺序寻找命令对应的位置。
-
这里我们在scripts里面加入了一个参数：build-->webpack，因此我们设置了webpack的默认编译顺序
-
当我们进行了上面的设置时，项目里执行webpack打包编译时就会自动去本地局部的node_modules/.bin路径中寻找对应的webpack命令。
-
如果没有找到，才会去全局的环境变量中寻找webpack
-
通过这句小小的代码，我们就可以实现项目里使用局部的webpack而不是默认全局的webpack
-
因此，配置完我们只需要在开发软件终端使用这句代码，就可以轻松使用局部webpack进行打包：
-
-
-
loader扩展加载包
-
webpack主要是用来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
-
但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
-
对于webpack本身的能力来说，对于这些转化是不支持的。
-
通过给webpack安装对应的loader扩展我们就可以实现上面的各种功能
-
loader使用过程：
-
步骤一：通过npm安装需要使用的loader
-
步骤二：在webpack.config.js中的modules关键字下进行配置
-
-
大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法：
-
-
-
css文件处理：css-loader、style-loader
-
css文件准备：
-
在src目录中，创建一个css文件，其中创建一个normal.css文件。
-
-
我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。
-
-
webpack找不到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。
-
入口文件引用css：
-
-
直接打包错误提示：
-
这个错误告诉我们：加载normal.css文件必须有对应的loader
-
-
css文件处理 – css-loader
-
按照官方配置webpack.config.js文件
-
-
注意：配置中有一个style-loader，我们并不知道它是什么，所以可以暂时不进行配置。
-
重新打包项目：
-
-
但是，运行index.html，你会发现样式并没有生效。
-
原因是css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到文档中。
-
这个时候，我们还需要一个style-loader帮助我们处理。
-
-
css文件嵌入-style-loader
-
安装style-loader
-
-
引入时：nstyle-loader需要放在css-loader的前面。
-
因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。
-
-
当前webpack.config.js的配置：
-
-
-
-
less文件处理-less-loader、less
-
先创建一个less文件，依然放在css文件夹，再引入打包，我们发现还是缺少loader
-
-
需要安装对应的loader，我们这里还安装了less，因为webpack会使用less对less文件进行编译：
-
-
其次，修改对应的配置文件
-
添加一个rules选项，用于处理.less文件
-
-
-
-
图片文件处理-url-loader、file-loader
-
在项目中加入两张图片：
-
一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb)
-
待会儿我们会针对这两张图片进行不同的处理
-
-
我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式：
-
-
如果我们现在直接打包，会出现如下问题：
-
-
使用url-loader来处理，依然先安装url-loader：
-
-
修改webpack.config.js配置文件：
-
-
打包，运行index.html：
-
背景图通过base64显示
-
-
limit属性的作用：当图片小于8kb时，对图片进行base64编码，大于则报错！
-
-
安装file-loader：
-
-
打包会发现dist文件夹下多了一个图片文件：
-
-
我们发现webpack自动帮助我们生成一个非常长的文件名字
-
这是一个32位hash值，目的是防止名字重复
-
但是，真实开发中，我们可能对打包的图片名字有一定的要求
-
比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复
-
-
所以，我们可以在options中添加上如下选项来自定义生成文件名：
-
img：文件要打包到的文件夹
-
name：获取图片原来的名字，放在该位置
-
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
-
ext：使用图片原来的扩展名
-
-
但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确
-
默认情况下，webpack会将生成的路径直接返回给使用者
-
但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/
-
-
-
ES6语法处理-babel
-
ES6语法转成ES5需要使用babel
-
命令：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
-
这个表示安装babel模块指定版本为7，且安装babel核心的版本指定为es2015
-
-
配置webpack.config.js：
-
-
exclude表示：排除局部webpack文件夹，避免将开发时依赖的文件包里的JS文件也打包出去
-
-
webpack引入vue.js
-
webpack环境中集成Vuejs
-
我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装
-
-
因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖
-
--save可不写
-
-
那么，接下来就可以按照我们之前学习的方式来使用Vue了
-
-
但是，我们打包后会发现：运行程序，没有出现想要的效果，浏览器报错
-
-
这个错误指出我们使用的是runtime-only版本的Vue，什么意思呢？
-
-
修改webpack的配置，添加如下内容：
-
-
-
-
基本操作：
-
-
-
Vue-cli脚手架
-
npm安装命令
-
npm install：本地安装
-
(1)将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
-
(2)可以通过 require() 来引入本地安装的包。
-
-
npm install -g：全局安装
-
(1) 将安装包放在 /usr/local 下或者你 node 的安装目录。
-
(2)可以直接在命令行里使用。
-
-
npm install --save：生产时依赖
-
(1)会把msbuild包安装到node_modules目录中
-
(2)会在package.json的dependencies属性下添加msbuild
-
(3)之后运行npm install命令时，会自动安装msbuild到node_modules目录中
-
(4)之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中
-
-
npm install --save-dev：开发时依赖
-
(1)会把msbuild包安装到node_modules目录中
-
(2)会在package.json的devDependencies属性下添加msbuild
-
(3)之后运行npm install命令时，会自动安装msbuild到node_modules目录中
-
(4)之后运行npm install --production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中
-
-
npm前两者不会修改package.json，而后两者会将依赖添加进package.json
-
-
什么是Vue-Cli
-
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
-
通过 @vue/cli 搭建交互式的项目脚手架。
-
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
-
一个运行时依赖 (@vue/cli-service)，该依赖：
-
可升级；
-
基于 webpack 构建，并带有合理的默认配置；
-
可以通过项目内的配置文件进行配置；
-
可以通过插件进行扩展。
-
-
一个丰富的官方插件集合，集成了前端生态中最好的工具。
-
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
-
-
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
-
-
vue-cli3与2版本区别
-
vue-cli3基于webpack4打造，vue-cli2是基于webpack3
-
vue-cli3的设计原则是"0配置"，移除了配置文件，build和config等
-
vue-cli3提供vue ui的命令，提供了可视化配置
-
移除了static文件夹，新增了public文件夹，并将index.html移入了public文件夹
-
-
Vue-Cli安装
-
使用前提：node
-
vue cli依赖nodejs环境，vue cli使用了webpack的模板。
-
-
安装vue脚手架vue-cli3：
-
npm安装：
-
npm install -g @vue/cli
-
-
如果使用yarn：
-
yarn global add @vue/cli
-
-
-
查看版本：
-
vue --version
-
-
安装失败的解决办法：
-
以管理员使用cmd
-
清空npm-cache缓存：npm clean cache -force
-
实在不行删除缓存文件夹里找对应文件夹
-
-
-
拉取2.x模板（安装旧版本：vue-cli2）
-
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。
-
如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
-
npm install -g @vue/cli-init
-
-
-
-
使用Vue-Cli创建并初始化项目：
-
Vue-Cli2创建项目：
-
vue init webpack XXX项目
-
-
-
Vue-Cli3创建项目：
-
vue create XXX项目名
-
-
-
初始化项目配置：
-
以脚手架2为例：
-
-
选项含义：
-
project name：项目名字（默认）
-
project description：项目描述
-
author：作者（会默认拉去git的配置）
-
vue build：vue构建时候使用的模式
-
runtime+compiler：大多数人使用的，可以编译template模板
-
runtime-only：比compiler模式要少6kb，并且效率更高，直接使用render函数
-
-
install vue-router：是否安装vue路由
-
user eslint to lint your code：是否使用ES规范
-
set up unit tests：是否使用unit测试
-
setup e2e tests with nightwatch：是否使用end 2 end，点到点自动化测试
-
Should we run npm install for you after the project has been created? (recommended)：使用npm还是yarn管理工具
-
-
-
手动修改项目配置：
-
如果创建工程时候选择了使用ESLint规范，又不想使用了，需要在config文件夹下的index.js文件中找到useEslint，并改成false：
-
-
-
-
项目目录结构
-
Vue-Cli2项目-完整目录分析：
-
build配置相关文件夹：
-
如图所示，build中将webpack的配置文件做了分离：
-
webpack.base.conf.js（公共配置）--> 抽取公共的配置参数，非公共部分抽离出来，这样生产和发布时只需要不同命令，而不需要来回修改项目的配置信息
-
webpack.dev.conf.js（开发环境）--开发环境独有配置，里面导入了公共配置
-
webpack.prod.conf.js（生产环境）--生产发布环境所需要的配置，里面也导入了公共配置
-
-
-
package.json：脚本命令配置、包管理、记录大概安装的版本：
-
里面配置了脚本命令，从而到达了节省在终端敲代码的长度，项目里运行终端命令时，先会在脚本配置文件里寻找相关命令
-
-
打包构建发布项目：
-
npm run build
-
-
本地开发运行测试：
-
npm run dev
-
-
此时npm run build打包命令相当于使用node 执行build文件夹下面的build.js文件。
-
build.js浅析：
-
检查dist文件夹是否已经存在，存在先rm删除上次编译的文件夹
-
-
如果没有err，就使用webpack配置打包dist文件夹
-
在生产环境，即使用build打包时候，使用的是webpack.prod.conf.js配置文件：
-
源码中，显然使用了webpack-merge插件来合并prod配置文件和公共的配置文件，合并成一个配置文件并打包，而webpack.dev.conf.js也是如此操作，在开发环境使用的是dev的配置文件。
-
-
-
-
-
config文件夹:
-
build的配置文件中所需的一些变量、对象，在webpack.base.conf.js中引入了index.js
-
const config = require('../config')
-
-
src-源码目录：
-
我们需要写业务代码的地方。
-
-
static-放静态资源的地方：
-
static文件夹下的资源会原封不动的打包复制到dist文件夹下。
-
-
.babelrc文件：
-
.babelrc是ES代码相关转化配置：
-
-
browsers表示需要适配的浏览器，份额大于1%，最后两个版本，不需要适配ie8及以下版本
-
babel需要的插件
-
-
.editorconfig文件：
-
.editorconfig是编码配置文件：
-
-
一般是配置编码，代码缩进2空格，是否清除空格等。
-
-
.eslintignore文件：
-
.eslintignore文件配置了检查语法时忽略一些不规范文件：
-
-
忽略build、config、dist文件夹和js文件
-
-
.gitignore文件：
-
.gitignore是git忽略文件，设置了git提交时忽略不提交的文件
-
-
.postcssrc.js文件：
-
css转化配置
-
-
项目根目录的index.html文件：
-
index.html文件是使用html-webpack-plugin插件打包的index.html模板。
-
-
package-lock.json：记录真实安装版本
-
怎样理解 Vue 项目的目录结构? --> https://www.bbsmax.com/A/1O5EjZ0nd7/
-
-
Vue-Cli3项目目录：
-
新版隐藏了配置文件：
-
-
手动配置：vue.config.js
-
隐藏的Webpack配置：
-
路径：node_modules->@vue\cli-service\webpack.config.js
-
-
-
-
-
public 类似 static文件夹，里面的资源会原封不动的打包
-
main.js
-
如果vue实例有el选项，vue内部会自动给你执行$mount('#app')，如果没有需要自己执行。
-
-
Vue.config.productionTip = false ----> 构建信息是否显示
-
-
打包后完整目录：
-
-
-
-
npm run build发布项目本地打开发现空白的问题及解决办法
-
原因：run build出来的静态文件的路径是绝对路径，如果改成相对路径也是可以直接跑的
-
解决办法：
-
本地模拟服务器：
-
先全局安装：npm i -g serve
-
然后在项目目录下运行命令来启动本地服务器：serve -s dist
-
-
注意：CMD权限问题
-
假如启动报错的话，我们需要用管理员权限打开再启动：
-
-
-
-
修改配置文件：
-
Cli2版本：
-
Vue项目打包报错Failed to load resource: net::ERR_FILE_NOT_FOUND ---->https://blog.csdn.net/qq_43671996/article/details/102892158
-
-
-
Cli3版本：
-
在项目根目录新建文件 vue.config.js 并写如下代码：
-
-
在 src/router.js 中删去 mode: 'history'，然后重新打包：
-
-
-
-
-
-
-
runtime-compiler和runtime-only的区别
-
compiler编译解析template过程：
-
-
vm.options.template解析成ast(abstract syntax tree)抽象语法树，抽象语法树编译成vm.options.render(functions)函数。
-
render函数最终将template解析的ast渲染成虚拟DOM（virtual dom），最终虚拟dom映射到ui上。
-
runtime-only优点：1.性能更高，2.需要代码量更少
-
runtime-compiler：template会被解析 => ast(抽象语法树) => 然后编译成render函数 => 渲染成虚拟DOM（vdom）=> 真实dom(UI)
-
runtime-only：render => vdom => UI
-
-
render函数：
-
-
h就是一个传入的createElement函数，.vue文件的template是由vue-template-compiler解析。
-
-
UI创建项目：vue ui
-
使用vue ui命令进入图形化界面创建项目，可以以可视化的方式创建项目并配置选项
-
-
-
router路由：SPA（单页应用）的路径管理器
-
什么是路由？
-
路由就是通过互联的网络把信息用源地址传送到目的地的活动
-
路由提供了两种机制：路由和传送
-
路由是决定数据包从来源到目的地的路径
-
转送就是将数据转移
-
-
路由表
-
路由表本质就是一个映射表，决定了数据包的指向
-
-
-
前端渲染和后端渲染区别
-
后端渲染（服务端渲染）
-
jsp技术 后端路由，后端处理URL和页面映射关系，例如springmvc中的@requestMapping注解配置的URL地址，映射前端页面
-
-
前后端分离（ajax请求数据）
-
后端只负责提供数据 静态资源服务器（html+css+js） ajax发送网络请求后端服务器，服务器回传数据 js代码渲染dom
-
-
单页面富应用（SPA页面）
-
前后端分离加上前端路由，前端路由的url映射表不会向服务器请求，是单独url的的页面自己的ajax请求后端，后端只提供api负责响应数据请求。改变url，页面不进行整体的刷新。 整个网站只有一个html页面。
-
-
-
路由分类
-
后端路由
-
对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。
-
当前端输入url请求资源时，服务器会监听到是什么url地址，那后端会返回什么样的资源呢？后端这个处理的过程就是通过路由来分发的。
-
总结：后端路由，就是把所有url地址都对应到服务器的资源，这个对应关系就是路由。
-
-
前端路由
-
对于单页面应用程序来说，主要通过URL中的hash（url地址中的#号）来实现不同页面之间的切换。
-
同时，hash有一个特点：HTTP请求中不会包含hash相关的内容。所以，单页面程序中的页面跳转主要用hash实现。
-
总结：在单页应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。
-
-
-
URL的hash和HTML5的history
-
URL的hash
-
URL的hash是通过锚点(#)，其本质上改变的是window.location的href属性。
-
可以通过直接赋值location.hash来改变href，但是页面并不会发生刷新。
-
-
vue-router其实用的就是这样的机制：
-
改变url地址，这个url地址存在一份路由映射表里面，比如/user代表要请求用户页面，只要配置了这个路由表（路由关系），就可以前端跳转而不刷新页面，所有的数据请求都走ajax。
-
-
-
HTML5的history模式
-
使用HTML5的history模式也是不会刷新页面的
-
history对象栈结构，先进后出，pushState类似压入栈中，back是回退。
-
hristory.pushState({}, '', '/foo')
-
history.back()
-
-
-
replaceState模式与pushState模式区别 --> 在于replaceState模式浏览器没有返回只是替换，不是压入栈中
-
history.replaceState({}, '', 'home')
-
-
-
go只能在pushState模式中使用，go是前进后退到哪个历史页面。
-
-
-
-
安装Vue-router的两种方式
-
-
方式一：直接下载文件（不推荐）
-
下载网址：https://unpkg.com/vue-router/dist/vue-router.js
-
下载之后，放进项目工程，然后我们在引入vue.js之后，再引入vue-router.js即可：
-
<script src="vue2.5.16.js"></script>
-
<script src="vue-router3.0.1.js"></script>
-
-
然后，我们就可以在 window全局对象中使用 VueRouter这个对象。具体解释可以看接下来的代码中的注释。
-
注意，只要我们导入了vue-router.js这个包，在浏览器中打开网页时，url后面就会显示#这个符号。
-
-
-
方式二：npm install vue-router --save来安装vue-router插件模块
-
在模块化工程中使用他(因为是一个插件，所以可以通过Vue.user来安装路由功能)
-
在src下创建一个router文件夹（一般安装vue-router时候会自动创建）用来存放vue-router的路由信息导入路由对象，并且调用Vue.use(VueRouter)
-
创建路由实例，并且传入路由映射配置
-
在vue实例中挂载创建的路由实例对象
-
-
-
-
使用Vue-router：https://router.vuejs.org/zh/api/#router-link
-
router文件夹中的index.js -----> 安装路由
-
先导入，再安装，定义配置变量routes，再创建路由对象router并关联变量，最终导出
-
这里我们配置了一个映射关系：路径默认时对应的组件名是HelloWorld
-
-
-
main.js中挂载router对象 -----> 挂载路由
-
inport router from './router/index.js' 可简写成：import router from './router' --------> 会自动寻找该文件夹下的index.js
-
router也可采用ES6的写法
-
-
-
使用router功能 -----> 使用路由
-
创建路由组件
-
在components文件夹下创建2个组件：
-
Home组件：
-
-
About组件：
-
-
-
-
配置路由映射：组件和路径映射关系
-
路由与组件对应关系配置在routes中的index.js里
-
-
-
注意：先导入组件，再修改路由映射表
-
-
-
使用路由：通过<router-link>、<router-view>
-
在app.vue中使用<router-link>和<router-view> 两个全局组件显示路由：
-
<router-link>是全局组件，最终被渲染成a标签
-
<router-link>只是标记路由指向，类似一个a标签或者按钮一样
-
我们点击a标签要跳转页面或者要显示页面，就要用上<router-view>。
-
<router-view> 是用来占位的，就是路由对应的组件展示的地方，该标签会根据当前的路径，动态渲染出不同的组件。
-
路由切换的时候切换的是<router-view>挂载的组件，其他不会发生改变。
-
<router-view>默认使用hash模式（#），可以在index.js中配置修改为history模式。
-
-
app.vue修改template:
-
-
修改路由的默认值和history模式：router文件夹里的index.js
-
修改路由的默认值：
-
-
修改hash模式为history模式：
-
-
-
-
-
-
<router-link>的属性：
-
to属性：用于跳转到指定路径。
-
tag属性：可以指定<router-link>之后渲染成什么组件使用<router-link to='/home' tag='button'>会被渲染成一个按钮，而不是a标签。
-
relapce属性：在history模式下指定<router-link to='/home' tag='button' replace>使用replaceState而不是pushState，此时浏览器的返回按钮是不能使用的。
-
active-class属性：当<router-link>对应的路由匹配成功的时候，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
-
在进行高亮显示的导航菜单或者底部tabbar时，会用到该属性
-
但是通常不会修改类的属性，会直接使用默认的router-link-active
-
<router-link to='/home' tag='button' active-class='active'>此时被选中的<router-link>就会有active的class。
-
如果每个<router-link>都要加上active-class='active'，那就在路由里面统一更改。
-
-
-
-
通过代码修改路由跳转-$router属性：路由实例
-
修改app.vue，将<router-link>换成button等任何组件，添加上点击事件，并写好点击事件响应方法，此时使用this.$router.push('/home')，push方法 等价于pushState方法，replace 方法等价于replaceState方法
-
-
-
-
动态路由-$route属性：单个路由对象
-
动态路由匹配：我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
-
新建一个User组件：该组件定义一个计算属性，通过this.$route.params.userId获取处于激活状态的路由参数userId。
-
-
配置路由参数index.js：映射表新增user映射：
-
-
使用:userId指定动态路由参数userId：app.vue中添加user页面的<router-link>，并添加userId变量
-
注意属性里的单引号！
-
-
-
$route是代表处于激活状态的路由
-
这里指的
-
-
-
设置多段“路径参数”：
-
-
-
路由懒加载
-
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
-
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
-
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
-
-
const Foo = () => import('./Foo.vue')
-
-
-
打包后JS文件浅析
-
打包时候js太大，页面响应缓慢
-
如果组件模块化了，当路由被访问的时候才开始加载被选中的组件，这样就是懒加载
-
component: () => import('@/components/User')
-
-
使用npm run build命令将之前创建的项目打包，打开dist文件夹，器目录结构如下：
-
app.xxx.js是我们自己编写的业务代码
-
vendor.xxx.js是第三方框架，例如vue/vue-router/axios等
-
mainfest.xxx.js是为了打包的代码做底层支持的，一般是webpack帮我们做一些事情
-
-
除了这三个还多了2个js，这2个js文件（0.5bxxx.js和1.e5xxx.js）分别是About和User组件，因为这2个组件是懒加载的所以被分开打包了。
-
-
-
捕获所有路由或 404 Not found 路由
-
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：
-
-
当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。
-
路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了History 模式，请确保正确配置你的服务器-https://router.vuejs.org/zh/guide/essentials/history-mode.html
-
vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。
-
-
匹配优先级
-
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
-
-
嵌套路由
-
URL 中各段动态路径按某种结构对应嵌套，例如：
-
-
实现嵌套路由：
-
components文件夹->创建对应的子组件，在router/index.js文件->修改路由映射中配置对应的子路由children属性。
-
新建2个组件HomeNews和HomeMessage：
-
-
配置嵌套路由：路由映射表里的属性children
-
-
-
在父级路由组件内部使用<router-view>标签来占位。
-
修改Home.vue组件加上<router-link>和<router-view/>
-
-
注意：路径问题
-
以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
-
如果不以/开头，那么每次嵌套路径会加在上一次路径的后面
-
children 配置就是像 routes 配置一样的路由配置数组，所以你可以嵌套多层路由。
-
-
-
-
-
vue-router的参数传递-$router属性：路由实例
-
传递参数主要有两种类型：params和query
-
params的类型也就是动态路由形式：参数是字符串
-
配置路由的格式：/user/:userId
-
传递的方式：在path后面跟上对应的userId
-
传递形成的路径：/user/123，/user/xxx
-
通过$route.params.userId获取指定userId
-
-
query的类型：参数是对象
-
配置路由的格式：/profile，也就是普通的配置
-
传递的方式：对象中使用query的key作为传递的方式
-
-
传递形成的路径：/profile?name=zty&age=24&height=177（这个传递的是三个键值对），/profile?profileInfo=%5Bobject%20Object%5D（这个query传递的是一个对象的键值对，key为profileInfo，value是一个对象）
-
-
-
传递步骤：
-
新建一个Profile.vue组件，并配置路由映射，添加指定的<router-link>。
-
-
app.vue中设置初始的对象profileInfo
-
-
-
-
router和route
-
vue全局对象this.$router与main.js导入的router对象是一个对象，也就是我们router/index.js导出的对象router。
-
-
this.$route对象是当前处于活跃的路由，有params和query属性可以用来传递参数。
-
$router和$route是继承自vue的原型
-
怎么理解原型？
-
学过Java 的都知道有父类和子类，子类也可以有自己的子类，但是他们都有一个处于最顶层的类Object(所有类的父类)。
-
在Vue中就有那一个Vue类似Object，在java中在Object中定义的方法，所有的类都可以使用可以重写，类似的Vue.prototype（Vue的原型）定义的属性方法，他的原型链上的对象都可以使用，而$router和$route都在Vue的原型链上。
-
-
-
-
组件注入
-
通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。
-
this.$router：router 实例。
-
this.$route：当前激活的路由信息对象。
-
这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。
-
-
-
导航守卫
-
为什么需要它：
-
问题：我们经常需要在路由跳转后，例如从用户页面跳转到首页，我们会发现我们的网页标题还是原来的！页面内容虽然可以自己定义，但是只有一个html文件，也只有一个title标签，我们需要改变标题。
-
使用vue的生命周期函数在组件被创建的时候修改title标签内容：
-
-
可是，我们总不能每个组件都去写生命周期函数吧，这也太麻烦了！
-
如果我们能监听路由的变化(了解路由从哪来往哪里跳转)，那我们就能在跳转中修改title标签，而这，就是导航守卫能做的事情。
-
-
概念：
-
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
-
有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
-
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
-
-
分类：
-
全局前置守卫：router.beforeEach
-
注册一个全局前置守卫：
-
-
注意：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
-
守卫方法接收三个参数：
-
to: Route: 即将要进入的目标 路由对象
-
from: Route: 当前导航正要离开的路由
-
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
-
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
-
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
-
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
-
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
-
-
确保要调用 next 方法，否则钩子就不会被 resolved。
-
-
-
全局解析守卫：router.beforeResolve
-
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。
-
这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
-
-
全局后置钩子：router.afterEach
-
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
-
-
-
路由独享的守卫：beforeEnter
-
在路由配置上直接定义 beforeEnter 守卫：
-
-
这些守卫与全局前置守卫的方法参数是一样的。
-
-
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
-
在路由组件内直接定义以下路由导航守卫：
-
beforeRouteEnter
-
beforeRouteUpdate (2.2 新增)
-
beforeRouteLeave
-
-
beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
-
-
beforeRouteEnter可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
-
-
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。
-
对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
-
-
离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
-
-
-
-
完整的导航解析流程
-
导航被触发。
-
在失活的组件里调用离开守卫。
-
调用全局的 beforeEach 守卫。
-
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
-
在路由配置里调用 beforeEnter。
-
解析异步路由组件。
-
在被激活的组件里调用 beforeRouteEnter。
-
调用全局的 beforeResolve 守卫 (2.5+)。
-
导航被确认。
-
调用全局的 afterEach 钩子。
-
触发 DOM 更新。
-
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
-
-
步骤：
-
router.beforeEach()-前置钩子(前置守卫)，跳转之前做一些处理。
-
修改router/index.js
-
-
每个路由配置上也要加上meta属性，不然就取不到下个页面正确标题信息。
-
-
为什么要使用matched[0]？
-
如果你是嵌套路由，又没有给子路由添加meta（元数据：描述数据的数据）属性，就会显示undefined，使用matched[0] ---> 取到匹配的第一个就会找到父路由的meta属性。
-
-
-
-
-
命名路由
-
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
-
你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
-
-
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
-
-
这跟代码调用 router.push() 是一回事：
-
-
-
命名视图
-
想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。
-
你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
-
如果 router-view 没有设置名字，那么默认为 default。
-
-
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components配置 (带上 s)：
-
-
-
别名
-
“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b。
-
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
-
对应的路由配置为：
-
-
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
-
-
keep-alive遇见导航
-
在首页和关于组件之间路由跳转的时候，Home组件一直重复创建和销毁的过程，每次创建都是新的Home组件，但是我有这样的需求：
-
当我点击首页消息页面，随后跳转到关于页面，又跳转到首页，此时我希望显示的是首页的消息页面而不是默认的新闻页面，此时就需要keep-alive来使组件保持状态，缓存起来，离开路由后，Home组件生命周期的destroyed()不会被调用，Home组件不会被销毁。
-
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或者避免重新渲染。
-
router-view也是一个组件，如果用<keep-alive><router-vie/></keep-alive>，将其包起来，所有路径匹配到的视图组件都会被缓存。
-
-
使用导航守护可实现嵌套路由的冲突问题：
-
-
当然，也可以在嵌套路由里再套个keep-alive来解决！
-
-
-
我们将<router-view/>包起来，那所有的组件都会缓存，都只会创建一次，如果我们需要某一个组件每次都创建销毁，就需要使用exclude属性。
-
此时Profile和User组件（这里组件需要有name属性，分别为Profile和User）就被排除在外，每次都会创建和销毁。
-
-
相对应的也有include属性，顾名思义就是包含，只有选中的才有keep-alive。
-
-
include和exclude都是使用字符串和正则表达式，使用字符串的时候，注意“,”之后之前都别打空格。
-
-
-
-
Promise：异步编程的一种解决方案。
-
Promise是ES6中的特性。 ---> 可在 JavaScript文件里查看详细概念
-
什么时候使用Promise？
-
解决异步请求冗余这样的问题，promise用于封装异步请求
-
-
Promise对象
-
new Promise((resolve, reject) => {})
-
Promise对象的参数是一个函数(resolve, reject) => {}，这个函数又有2个参数分别是resolve和reject。
-
这2个参数本身也是函数，是不是有点绕？
-
后面还有回调函数then(func)的参数也是一个函数。
-
-
使用
-
定时器模拟网络请求，定时一秒为网络请求事件，用console.log()表示需要执行的代码。
-
原始嵌套回调函数：
-
-
使用promise来处理异步操作：
-
-
调用resolve()就能跳转到then()方法就能执行处理代码，then()回调的返回值又是一个Promise对象。
-
层次很明显，只要是then()必然就是执行处理代码，如果还有嵌套必然就是返回一个Promise对象，这样调用就像java中的StringBuffer的append()方法一样，链式调用。
-
但是，上面我们还没用到失败的函数：reject()
-
网络请求中也会有失败情况？例如网络堵塞 ----> 处理失败情况，此时就要用到reject()：
-
-
完整代码：
-
-
注意：
-
resolve中传参，那么在then()方法中的参数就是这个参数，例如success接受到的就是resolve传递过来的字符串！。
-
-
-
-
Promise的三种状态
-
pending:等待状态，比如正在进行的网络请求还未响应，或者定时器还没有到时间
-
fulfill:满足状态，当我们主动回调了resolve函数，就处于满足状态，并会回调then()
-
reject:拒绝状态，当我们主动回调reject函数，就处于该状态，并且会回调catch()
-
-
Promise写法
-
网络请求响应结果为 hello ,打印hello
-
处理： hello world ,打印hello world
-
处理： hello world，vuejs ,打印hello world，vuejs
-
基础写法：
-
-
简写Promise.resolve()：
-
-
还可以直接省略掉Promise.resolve()：
-
-
如果中途发生异常，可以通过throw抛出异常，通过catch()捕获异常：
-
-
-
Promise的all使用
-
这样一个情况，一个业务需要请求2个地方（A和B）的数据，只有A和B的数据都拿到才能走下一步。
-
由于不知道网络请求A和网络请求B哪个先返回结果，所以需要定义一个函数只有2个请求都返回数据才回调成功：
-
-
-
-
Vuex：状态管理模式
-
概念：
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
-
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
-
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
-
通俗点：类似于全局变量，可以在多个组件里使用共同的变量，并且发生改变时使用到的组件视图也会自动更新！
-
-
特点：
-
组件间同步数据
-
响应式+getter
-
严格限制的数据流向
-
-
与localstorage的区别：
-
vuex里，某个状态的变化可以在组件内实时监测、并进行处理。localstorage不行，它只是存，没有“变化”的概念。
-
如果希望刷新页面后vuex里的状态不丢失，那么可以在应用销毁前把整个store存到localstorage里面，然后在应用加载的时候，检测localstorage内有无状态信息，有则加载进来。这样就实现了页面刷新后的状态保持。
-
-
单向数据流”理念的简单示意图：
-
状态自管理应用包含以下几个部分：
-
state，驱动应用的数据源；
-
view，以声明方式将 state 映射到视图；
-
actions，响应在 view 上的用户输入导致的状态变化。
-
-
代码示例：
-
-
-
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
-
出现的问题：
-
多个视图依赖于同一状态。
-
来自不同视图的行为需要变更同一状态。
-
-
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
-
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。
-
以上的这些模式非常脆弱，通常会导致无法维护的代码。
-
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？
-
-
在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
-
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
-
这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。
-
与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
-
actions ---> 异步操作，比如：网络请求api
-
mutations ---> 同步操作，允许在无异步操作时直接跳过actions调用该方法
-
vue 组件也可以直接修改state，但是官方不推荐，因为这样的话无法通过开发插件跟踪记录state，这也就意味着无法调试跟踪
-
-
-
单界面到多界面状态管理切换 -> 使用Vuex
-
安装Vuex：
-
-
新建store(仓库)文件夹 --> 新建index.js文件：
-
-
配置main.js来给Vue对象挂载Vuex对象：
-
-
在需要用到的组件里直接使用状态：这里我们使用了Vuex里的counter状态（可看出公共变量）
-
-
使用mutations方法：同步/简单操作状态，参数两个-state、payload
-
store/index.js：增加mutations方法，这里面的方法会默认传递过来state参数，从而不需要使用this指针
-
-
app.vue里面使用$store.commit()来修改state状态：
-
-
传入自定义参数：
-
mutations内的方法可接收第二个参数：
-
-
App.vue通过commit调用传参：
-
-
-
第二种提交风格-包含type属性的对象：
-
上面的commit是一种普通提交方式
-
Vue提供了第二种风格：注意，此时只有一个参数
-
-
-
-
使用getters方法：类似计算方法-compute，参数两个-state、getter
-
store/index.js：
-
增加state内容：
-
-
定义getters：
-
-
-
App.vue调用，传值调用返回的是一个函数，因此等于getters返回的函数接收到传入的12这个值
-
-
-
使用actions方法：异步/复杂操作，参数两个-state、payload
-
异步操作：context.commit()调用的其实是mutations里的方法
-
-
提交mutation用commit，分发action用dispatch：App.vue
-
-
传递参数：
-
-
结合Promise使用：
-
index.js：
-
-
App.vue：
-
-
-
-
使用Modules方法：抽离模块，参数两个-state、payload
-
划分a/b模块
-
-
App.vue拿到a可直接使用：
-
-
模块的mutations方法：
-
注意，即使不同模块里的mutation方法也不可以同名。
-
同名的话：会先执行根里方法；再执行模块里的：两个都会执行
-
-
-
App.vue调用mutation：
-
-
模块增加getters方法：
-
注意：模块里的getters允许有第三参数：拿到根的state：
-
-
-
模块增加actions方法：
-
打印context对象：
-
-
actions里因此可调用根里的getters方法：
-
-
-
App.vue调用actions方法：
-
-
-
-
类型常量---命令规范
-
在store新建mutations-types.js ---> Vuex-mutations的类型常量文件
-
-
mutations里使用定义好的常量规范：
-
-
App.vue使用：也要导入
-
-
-
项目结构：
-
推荐：
-
-
store重构结构：
-
-
-
-
网络模块
-
Vue发送网络请求方式：
-
Ajax
-
-
JQ-Ajax
-
-
Vue-resource
-
-
axios【重点】：
-
-
Jsonp：
-
-
-
axios请求方式：
-
-
axios基本使用：
-
免费接口测试：http://httpbin.org/
-
安装：npm install axios --save
-
App.vue简单配置：http://123.207.32.32:8000/home/multidata
-
-
-
post使用：
-
-
注意：axios里会自动创建个Promise对象，因此我们可直接使用then方法
-
-
-
axios的all用法：
-
两个请求都成功才调用最后的then方法
-
-
-
axios的配置：
-
axios的全局配置：
-
-
常见配置选项：
-
-
-
axios创建实例：
-
axios全局配置在分布式服务器时会发现baseurl其实是不一样，这时候我们的全局配置就会产生矛盾，因此，我们可以通过创建一个axios实例来达到不同服务器使用不同实例的目的。
-
-
-
axios封装：
-
直接引用第三方框架会导致整个项目对第三方模块依赖太强，一旦第三方模块不在维护，我们需要在所有用到的地方都进行修改
-
-
因此，我们对使用到的第三方模块做一次封装，即使以后需要替换或者升级，我们也只修改我们自己封装的代码就行了：我们新建个network文件夹，再新建个request.js
-
-
封装我们不采取export default的原因是：我们封装的可能有多个实例！
-
main.js使用封装好的模块：
-
-
封装形式2：
-
-
使用封装形式2：
-
-
封装形式3：（推荐）
-
-
使用封装3：
-
-
封装3优化：每次都创建一个新实例，浪费内存！
-
-
高级封装：
-
-
-
axios使用拦截器：
-
拦截器用于我们在发送每次请求或者得到相应后，进行对应的处理：
-
-
拦截请求和返回：
-
-
为什么需要拦截器：
-
叫拦截器因为需要拦截请求，比如统一加headers。
-
请求之前想要做什么事情就需要拦截器，比如你可以在请求前加一个loading，请求成功关闭loading，可以做一些像 401登录跳转啊之类的
-
可以做请求对接
-
统一数据处理：把需要的数据拦截一下，返回其中需要的数据，比如：return res.data
-
每次都会拿着一个带着拦截器的新实例
-
-
前端做一些验证或处理可以有效减轻服务器的压力
-
-
请求拦截作用：
-
以登录为例，我们在request拦截里先取到url，判断是否登录实名等敏感操作，再进行令牌校验。
-
-
响应拦截：
-
-
-
-
Json操作
-
方法一：
-
import test_mcc_json from '@/assets/data/test_mcc.json'
-
-
方法二：
-
vue实现对数据的增删改查(CURD)-> https://www.xiabingbao.com/vue/2017/07/10/vue-curd.html
-
-
vue经验（从别的文章里拼凑来的，不希望有人看，防止侵权） - https://juejin.im/post/5b192975e51d4506c86663e8
-
-
项目实战
-
开源协议
-
一目了然
-
-
-
npm报错解决
-
npm install卡在安装 node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node
-
原因分析：
-
npm服务器在美国，还有就是某强大的防火墙作用。导致模块无法下载。
-
-
解决办法：
-
切换国内淘宝镜像：
-
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
-
-
再次安装：安装sass-loader、node-sass（-D 是 --save-dev 的简写）
-
npm install sass-loader node-sass -D
-
-
要是还不行：在项目目录下执行下面命令-移除之前下载并重新下载
-
rm -rf node_modules/ && npm i
-
-
-
-
Modele build failed: TypeError: this.getResolve is not a function at Object.loader..
-
原因分析：
-
sass-loader的版本为最新8.0.0，版本过高导致编译错误
-
-
解决办法：
-
把项目package.json文件中sass-loader版本改低，比如图中改为7.3.1
-
-
执行命令，重新安装项目依赖
-
$ npm install
-
-
然后，启动项目
-
$ npm run dev
-
-
-
-
npm一直停在"fetchMetadata: sill resolveWithNewModule"的问题
-
换成淘宝的源
-
-
配置后可通过下面方式来验证是否成功
-
npm config get registry
-
-
-
-
Git报错解决
-
大部分错误原因
-
分析：
-
0.没有初始化
-
1.本地git仓库目录下为空
-
2.本地仓库add后未commit
-
3.git init错误
-
-
解决方法：
-
1.控制面板打开文件夹选项 打开隐藏文件和文件夹显示
-
2.到本地仓库目录下查看是否有.git文件夹——无 则git init
-
3.看.git文件夹下是否有之前提交的文件——若无 则重新 git commit (如果之前git add过的话 没有就要重新 add commit)
-
4.新装的git要留意是否需要配置用户名和邮箱名
-
-
-
相关文章：
-
GitHub代下载服务· ---> https://g.widora.cn/
-
git常用操作以及说明 - > https://www.cnblogs.com/leaf930814/p/6664706.html
-
-
fatal: Not a git repository (or any of the parent directories): .git
-
原因分析：
-
没有.git这样一个目录
-
-
解决办法：
-
本地仓库使用如下命令初始化 -----> git init
-
移除之前远程库 ---> git remote rm origin
-
添加远程库 ----> git remote add origin 地址
-
-
-
error: src refspec master does not match any ---> 解决办法
-
原因分析：
-
引起该错误的原因是目录中没有文件，空目录是不能提交上去的
-
-
解决办法：
-
创建一个README文件 -----> $ touch README
-
添加README文件给Git管理 -----> $ git add README
-
本地提交加注释 -----> $ git commit –m 'first commit'
-
提交到服务器测试 -----> $ git push origin master
-
-
-
-
原因分析：
-
在github的remote上已经有了文件，会出现错误。
-
-
解决办法：
-
此时应当先pull一下 ----> git pull origin master
-
-
-
新建仓库与本地项目联系起来
-
官网说明：
-
-
出错的话：error: failed to push some refs to 'https://github.com/Yinshijia/ShijiaYin.github.io'
-
原因分析：
-
因为你的本地仓库和远程仓库不一样，但你的本地仓库又不是master，所以你是不能直接push的，你需要先使用下面的指令将远程仓库pull下来
-
-
解决办法：
-
git pull origin master --allow-unrelated-histories
-
然后：
-
git push -u origin master
-
-
-
-
-
项目创建、git使用
-
-
-
仓库选项：
-
-
获取仓库地址：复制下来地址
-
-
终端拷贝下来仓库数据：
-
也可不克隆，直接建立联系：【推荐这种方式】
-
git初始化：git init
-
链接远程仓库：origin是远程库的别名可以是别的
-
git remote add origin 地址
-
-
推送上去：git push -u origin master（第一次需要用-u，以后push就可以不用-u了）
-
-
-
将我们本地项目覆盖掉克隆下来的仓库：
-
-
拷贝过来我们会发现仓库文件都是红色，这是因为拷贝过来的文件都没有在git的代码管理之下：我们进入路径，查看当前git状态
-
-
初始化git：我们先将文件全部加入到git管理，再将git提交（这时是在本地里）
-
-
提交到服务器：
-
-
弹出登录界面：正常登录
-
-
假如还是失败的话，再次输入帐号和密码：
-
-
以后写了新的代码，一般只需要：git add .新增、git commit提交本地，再git push就行了
-
-
项目结构划分
-
目录划分：assets里面包含子文件夹：css、image文件夹
-
-
-
css文件引入
-
normalize.css -- CSS ：https://github.com/necolas/normalize.css
-
base.css ---> 本项目基础css、比如定义版心之类的，引入normalize.css：
-
:root ---> 表示获取根元素：html标签；--font-size定义的是变量！这种方式css也能定义变量。
-
-
通过var我们可以使用上面定义的变量！
-
-
-
样式里面引入样式，不能直接用import；需要在import 前面加上@
-
-
项目配置
-
vue.config.js：默认@代表src目录 ---> '@'：'src'
-
-
.editorconfig：
-
-
注意：
-
html标签使用别名时除了@，其他比如assets前面都需要加上~来表示别名
-
-
js里不需要加，直接使用别名引入：
-
-
css导入其他css需要在import前面加上@，比如：
-
-
-
-
项目模块划分
-
使用标签栏组件tabbar，安装使用路由vue-router
-
views文件夹-四个模块：主页、分类、购物车、个人详情
-
-
navbar-导航栏目组件目录：
-
-
-
封装网络请求-network目录
-
-
轮播图组件封装
-
轮播图建议用第三方swiper，非常好用
-
-
RecommendView推荐模块封装
-
-
tabControl选项卡组件封装
-
-
商品列表数据结构设计
-
-
封装商品请求方法：
-
-
Home.vue的生命周期函数调用请求数据
-
-
商品列表展示模块：
-
-
better-scroll -->第三方滑动模块，原生的滑动（window.onscroll：屏幕滑动）略带卡顿
-
安装：npm install better-scroll --save
-
简单用法：
-
-
上拉加载更多：
-
mint-ui也可
-
-
vue里使用检测当前位置：
-
-
-
better scroll封装准备，设计封装后使用：
-
-
项目使用封装好的btscroll：
-
封装返回顶部组件：
-
业务相关代码
-
-
-
Home组件监听返回顶部组件的点击事件：
-
不能直接监听，需要使用.native的修饰符
-
第一个.scroll是ref中的，第二个是子组件中的scroll
-
-
-
或者在返回顶部组件外面套一个div标签
-
或者在返回顶部组件$emit发送给Home组件，组件再获取scroll组件来操作
-
-
返回顶部组件增加判断是否显示图标：
-
scroll将坐标发送出去
-
-
Home组件判断是否显示：
-
-
-
上拉加载更多
-
Scroll组件增加：
-
-
Home组件增加：
-
-
Better scroll有个BUG：
-
-
-
详情页datail组件封装
-
详情页导航封装DetailNavBar
-
效果：
-
-
Html部分：
-
-
js部分：
-
-
css部分：
-
-
-
封装详情页请求detail.js
-
network文件夹
-
-
-
-
示例
-
使用v-for和v-bind实现将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。
-
v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。
-
-
-
v-on实现文字滚动显示（跑马灯效果）
-
在Vue的实例中，如果想要获取data里的属性、methods里面的方法，都要通过this来访问。这里的this指向的是Vue的实例对象。
-
-
VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data 上同步到页面中去。这样做 的好处是：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面；减少DOM操作。
-
在调用定时器 id 的时候，代码是this.intervalId，这个this一定不要漏掉了。
-
经验
-
Vue响应式对部分情况无法监听
-
数组 ---> 数组变化的标准是 引用值变化、长度变化。。。反正不包括数组内容变化，所以我们直接使用数组下标修改将会无效：arr[0]=1,这种是无法自动刷新的，我们建议使用数组方法进行修改数据
-
数组响应式的方法push，pop，shift,unshift,splice,sort,reverse，但是concat无法监听到
-
-
对象 ---> list.['nmae']='ssss‘ 这种方法给Vue对象新增的键值对无法监听和自动刷新，我们
-
-
-
模板强烈注意符号 {单引号 --- [']} 与 {模板字符串 --- [`]} 的区别！
-
{单引号 --- [']} 在enter回车键左边
-
{模板字符串 --- [`]} 在tab缩进键上方 ---ES6语法引入
-
-
错用符号的后果：
-
单引号时，如果里面有回车等符号，将会报错无法识别：
-
回车无法识别：
-
-
删除回车可正常：
-
-
-
模板字符串结构更清晰：
-
-
-
-
vue data 为什么需要函数return？
-
JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。
-
vue的data数据其实是vue原型上的属性，数据存在于内存当中
-
vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。
-
因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。
-
更多：
-
vue里的data要用return返回的原因浅析-> https://www.jb51.net/article/162128.htm
-
Vue中data返回对象和返回值的区别 - https://www.cnblogs.com/smart-girl/p/10521950.html
-
-
-
vue组件template中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。
-
必须为函数。
-
-
-
在template 中取data()中数据注意DOM属性和非属性之间的区别：若是DOM属性中取data()中数据，直接写属性名即可，而DOM非属性取值，则需要加上{{**}}
-
示例：
-
-
-
默认绑定的双向绑定、v-bind视图绑定模型、v-model双向绑定之间的区别？
-
默认的绑定是双标签或者标签与标签之间的绑定，一般是模板语法，用{{}}包裹起来，中间的字符与模型之间的同名属性值 双向绑定； v-bind是主动将视图与模型里的数据绑定，比如标签里的src属性，可达到动态更换图片的效果，与默认的区别在于在标签属性里而不是标签内容里； v-model是语法糖，本质是v-bind:视图绑定数据 + v-on:input：视图改变数据（监听键盘事件改变模型内的属性值） 达到的双向绑定效果：视图模型相互影响！
-
-
computed、methods、watch的区别
-
#computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
-
#methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
-
#watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
-
通俗来讲，
-
computed是在HTML DOM加载后马上执行的，如赋值；
-
而methods则必须要有一定的触发条件才能执行，如点击事件；
-
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
-
所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
-
-
DOM属性里对象键值注意事项、名字驼峰/-符使用场所总结
-
以v-bind:为例的属性名称：
-
对象里的value必须使用引号，不然就会当作变量处理
-
属性值value（包括对象值）里的key不需要引号，因为默认就是当作字符串处理，但需要注意，如果key值里有“-”等符号，必须使用单引号/将第二个单词首字母大写，不然：“-”等符号会识别成运算符/表达式
-
-
属性名推荐驼峰式写法
-
-
component为例的组件名称：
-
-
component参数：
-
对于 props 声明的属性，在父组件的 template 模板中，属性名需要使用中划线写法；
-
子组件 props 属性声明时，使用小驼峰或者中划线写法都可以；而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰写法。别担心，Vue 能够正确识别出小驼峰和下划线命名法混用的变量
-
-
Html标签里的属性名也不使用驼峰表示法
-
-
$emit里的参数使用驼峰表示法
-
综合命名示例：
-
-
-
在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
-
初始化vm的过程，会先把data绑定到vm,再把computed的值绑定到vm，会把data覆盖了
-
不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此 这三个都不能同名
-
-
模板与组件的区别？
-
首先 模板 对应着的 .vue文件 的 <template> </template> 部分 ，表示的含义是对视图的描述。在 Vue 的设计哲学中，视图 和 数据 是两个部分，数据驱动视图的变化。所以 模板 对应的是具体的描述，描述的主体是当前 Vue实例 的视图部分。
-
而 组件 是一个抽象的概念，对应着一个 .vue 文件。每一个 Vue实例 都可以是一个 组件 ，因为所有的组件最终都要挂载在 app.vue 上，所以可以说 整个Vue工程都是一个组件 。
-
从 Vue官方教程 中可以看到，组件本质上是有预定义选项的 Vue实例，组件具有的特征是 小型，独立，通常可复用。
-
再来看问题：模板是对视图的描述，组件是抽象概念，Vue组件是拥有预定义选项的Vue实例。
-
既然 模板是对视图的描述 ，那么 这个 Vue实例 中 部分视图 如果跟组件所描述的视图相同，我们就可以 使用组件来代替这部分视图， 这个就称为 可复用。 当你发现 视图大同小异，而刚好我们可以通过一些手段控制这些细小的差异，利用 Props 使得组件表现出细微的差别，那么利用 Props（预定义选项） 让组件表现不同的视图。我们可以称之为：UI组件 或者 木偶组件。
-
同时我们还知道，Vue实例中除了视图还有逻辑处理，如果组件的这部分的逻辑处理也能被复用。举例为一个弹窗，弹窗应该具备 标题, 取消按钮 , 确认按钮 , 遮蔽层 。可以发现，所有的弹窗，都要求 点击取消按钮，弹窗消失, 点击确认按钮，执行某些操作 。这种逻辑处理和视图，都是可以通过 props 被复用的。 我们可以称之为：功能组件 或者 智能组件。
-
所以组件和模板是两个维度的概念，尽管他们的关系是相互的，组件里面可以用 模板描述组件的视图。同时模板也可以直接 使用组件描述部分视图 。
-
要想用好他们，需要理解他们的概念，根据不同的业务场景细分不同的情况。包括我对组件的划分，其实只是在某些场景下适用。
-
-
动态添加对象的属性
-
Vue中，动态新增对象的属性时，不能直接添加。正确的做法是：Vue.set(obj,key,value)。
-
-
-
接口拿到数据后对象的赋值
-
在 store 中定义一个对象：
-
-
从接口拿到数据后，给这个对象赋值：
-
-
-
判断一个checkbox是否被选中
-
-
被 <keep-alive>标签包裹，activated()和deactivated()两个函数才生效
-
activated()当组件属于进入活跃状态的时候调用
-
deactivated()当组件属于退出活跃状态的时候调用(此时路由已经跳转，所以不能在此方法中修改路由，因为修改的是to路由)
-
-
怎么鉴权？
-
jwt session token
-
鉴权的几个模式，让无状态的http请求变成自带状态，后端可以知道是谁发来的
-
-
怎么避免未渲染就使用Dom对象？
-
nextTick
-
-
-
监听图片加载是否完成
-
-
孙子组件怎么和父级组件的兄弟组件联系传递数据/控制兄弟组件调用方法
-
如图：
-
-
方法一：通过props一步一步传上去再通过入口组件调用
-
方法二：我在某个状态修改store的数据，入口组件watch监听到变化再通过$refs调用滚动组件
-
方法三：我通过bus.$emit(事件名)发给发射出去事件，入口组件$on监听调用事件
-
-
-
防抖debounce/节流throttle
-
防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
-
apply改变this指向，否则this指向window
-
-
防抖调用：
-
-
定时器内再次调用，就会清除定时器重新调用
-
-
场景：
-
有个输入框，输入之后会调用接口，获取联想词。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。
-
-
-
-
节流：指定时间间隔内只会执行一次任务。
-
代码：
-
-
场景：
-
懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取。
-
用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。
-
-
-
注：
-
JS事件循环执行顺序：同步 > 微任务(比如：Promise > 宏任务(比如：setTimeout
-
-
-
认识 package.json
-
https://juejin.im/post/5ebcd8b1e51d454dc20dd8a0
-
-
获取Vue里的Dom对象
-
Vscode配置Vue
-
下载vetur 插件
-
-
依次选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框
-
vue文件模板配置：
-
我们输入vue
-
-
-
-
新建vue文件，将发现敲上vue再按enter可直接出现模板代码
-
-
html文件引入vue配置：
-
选择html.json回车进入
-
-
-
-
保存关闭，进入Html文件输入vue再按下回车即可！
-
